<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::common_header(~{::title},~{::link},~{})">
    <title>添加设备</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
</head>
<body>
<div th:replace="common/bar::topbar" style="height: 100%"></div>
<div class="container-fluid">
    <div class="row">
        <!--左边导航栏-->
        <div th:replace="common/bar::#sidebar"></div>
        <!--//中间表格栏-->
        <div>

            <form class="border" style="padding: 20px;margin: 10px">

                <div class="form-group">
                    <svg class="bi bi-grid-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M1 2.5A1.5 1.5 0 012.5 1h3A1.5 1.5 0 017 2.5v3A1.5 1.5 0 015.5 7h-3A1.5 1.5 0 011 5.5v-3zm8 0A1.5 1.5 0 0110.5 1h3A1.5 1.5 0 0115 2.5v3A1.5 1.5 0 0113.5 7h-3A1.5 1.5 0 019 5.5v-3zm-8 8A1.5 1.5 0 012.5 9h3A1.5 1.5 0 017 10.5v3A1.5 1.5 0 015.5 15h-3A1.5 1.5 0 011 13.5v-3zm8 0A1.5 1.5 0 0110.5 9h3a1.5 1.5 0 011.5 1.5v3a1.5 1.5 0 01-1.5 1.5h-3A1.5 1.5 0 019 13.5v-3z"
                              clip-rule="evenodd"/>
                    </svg>
                    <label for="nodeOpt">设备类型</label>
                    <select class="form-control" id="nodeOpt" name="nodeId">
                        <!--<option th:each="node:${nodeList}" th:value="${node.nodeId}" th:text="${node.nodeName}" selected></option>-->
                    </select>
                </div>

                <div class="form-group">
                    <svg class="bi bi-geo-alt" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M8 16s6-5.686 6-10A6 6 0 002 6c0 4.314 6 10 6 10zm0-7a3 3 0 100-6 3 3 0 000 6z"
                              clip-rule="evenodd"/>
                    </svg>
                    <label for="textInput">设备位置</label>
                    <input type="text" class="form-control" id="textInput" placeholder="请输入设备所处位置" name="desc">
                </div>

                <div class="form-group">
                    <svg class="bi bi-arrow-right-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                        <path fill-rule="evenodd" d="M7.646 11.354a.5.5 0 0 1 0-.708L10.293 8 7.646 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0z"/>
                        <path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z"/>
                    </svg>
                    <label for="command">设备命令</label>
                    <input type="text" class="form-control" id="command" placeholder="请输入设备命令" name="command">
                </div>

                <button type="button" class="btn btn-secondary" style="margin-left: 150px" id="create"
                        onclick="addDevice()">
                    创建
                </button>
            </form>

        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">

    $(function () {

        $.ajax({
            type: "post",
            url: "/data/api/deviceSet/addDevice",
            data: {
                //参数
            },
            success: function (data) {
                if (data.code == 200) { //请求成功
                    var con = data.data;
                    var str = ''
                    if (con.length != 0) {
                        for (var i = 0; i < con.length; i++) {
                            str += '<option  value="' + con[i].nodeId + '" >' + con[i].nodeName + '</option>'
                        }
                        $("#nodeOpt").append(str); //动态显示下拉列表数据

                    } else {
                        alert(data.code + data.message)
                    }
                }

            }
        })
    })
</script>
<script>
    function addDevice() {
        var nodeId = $('#nodeOpt  option:selected').val();
        var desc = $("#textInput").val();
        var command=$("#command").val();
        $.post(
            "/data/api/deviceSet",
            {
                nodeId: nodeId, devDesc: desc,command:command
            },
            function (data) {
                if (data.code == "201") {
                    alert(data.code + ":" + data.message)
                    window.location.href = "list"
                } else {
                    alert(data.code + ":" + data.message)
                }
            })
    }

</script>
